<!--
  @created by  zhangxs4 on 2019/01/14.
  @description 客户灵活查询
-->
<div id="custFlexyQuery" style="padding: 0px 15px">
    <link rel="stylesheet" type="text/css" href="./pages/content/custManager/custFlexyQuery/custFlexyQuery.css"	/>
    <div style="background-color: #FFFFFF; padding: 10px; border-radius: 4px;">
        <!-- 方案新增、修改、查看对话框 -->
            <!-- 字段选择树、查询条件、显示列、图表配置 -->
            <el-row :gutter="10">
                <!-- 字段选择树 -->
                <el-col :span="colv.spanTree" style="padding-left: 0px" :hidden="colv.spanTreeHidden">
                    <template>
                        <yu-input placeholder="请输入" icon="search" v-model="filterTreedataValue" :on-icon-click="filterTreedata">
                        </yu-input>
                    </template>
                    <el-tree-x ref="flexytree" :span="6" :height="height - 20" v-bind:style="{height: (height-20) + 'px' }" draggable :allow-drop="allowDroprow"
                               @node-drag-start="handleDragStart" data-url="/api/flexibleQuery/getIndexTree" data-id="nodeId" data-label="name" data-pid="parentId"
                               node-key="nodeId" :filter-node-method="filterNode" :data-params="dataParams" :root-visible="true" data-root="0" style="margin:10px 0 0 0;width: 100%;" @load-all-data="getdata">
                    </el-tree-x>
                </el-col>
                <!-- 查询条件、显示列、图表配置 -->
                <el-col :span="colv.spanS" class="custFlexytab" style="padding-left: 10px;" :disabled="loading" v-loading="loading">
                    <template>
                        <el-tabs v-model="activeName" @tab-click="handleClick" >
                            <!-- 查询条件 -->
                            <el-tab-pane label="查询条件" name="first" >
                                <div id="queryCon" :style="{height: (height-100) + 'px' }" style="background-color:#FAFAFA" @drop="allowDrop($event)" @dragover='allowDropover($event)'>
                                    <!-- 第一级查询条件 -->
                                    <div class="ys-stGroup" v-for="(item,index) in list" :key="index"  >
                                        <el-form label-width="80px" ref="item.index" :model="dataSqlTemp[item.index]">
                                            <el-row class="conDisable">
                                                <el-col :span="6">
                                                    <el-radio-group v-model="dataSqlTemp[item.index].radio2" v-show="radioshow">
                                                        <el-radio :label="item.and"></el-radio>
                                                        <el-radio :label="item.or"></el-radio>
                                                    </el-radio-group>
                                                </el-col>
                                            </el-row>
                                            <div @dragover='Dragover($event)'>
                                                <div class="formrow">
                                                    <el-row>
                                                        <el-col :span="7" >
                                                            <el-form-item label="属性" class="mustWrite">
                                                                <el-input :placeholder="item.name" v-model="dataSqlTemp[item.index].proPer" readonly></el-input>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="7">
                                                            <el-form-item label="操作符" class="mustWrite" :rules="opRule" prop="signOp" >
                                                                <yu-xform-item-part v-model="dataSqlTemp[item.index].signOp" rules="required" :ctype="item.section.ctype" :options="item.section.options"
                                                                                    placeholder="请选择"></yu-xform-item-part>
                                                            </el-form-item>
                                                        </el-col>
                                                        <el-col :span="8">
                                                            <!-- <el-form-item label="属性值" class="mustWrite" :rules="signvRule" prop="signVal">
                                                                <yu-xform-item-part v-model="dataSqlTemp[item.index].signVal" :unit="item.items.unit" :ctype="item.items.ctype" :type="item.items.type"
                                                                                    :options="item.items.options" placeholder="请选择"></yu-xform-item-part>
                                                            </el-form-item> -->
															<el-form-item label="属性值" prop="signVal">
															    <yu-xform-item-part v-model="dataSqlTemp[item.index].signVal" :unit="item.items.unit" :ctype="item.items.ctype" :type="item.items.type"
															                        :options="item.items.options" placeholder="请选择"></yu-xform-item-part>
															</el-form-item>
                                                        </el-col>
                                                        <el-col :span="2" class="objDelBtn">
                                                            <el-button class="delbtn" @click="queryCondelTableRow(index,list)">删除</el-button>
                                                        </el-col>
                                                    </el-row>
                                                </div>
                                            </div>
                                        </el-form>
                                    </div>
                                </div>
                                <div class="yu-toolBar" style="margin:10px 10px 10px 10px; text-align: center;">
                                    <span>筛选条数：</span>
                                    <el-input v-model="limitNum" type="num" style="width: 60px;"></el-input>
                                    <el-button  class="quybtn"  @click="querySolutionRstFn" v-if="querySolutionRstBtnShowFlag">查询结果</el-button>
                                    <el-button  @click="saveSolutionFn" v-if="saveSolutionBtnShowFlag">保存</el-button>
                                    <el-button  class="resbtn" @click="resetSolutionFn" v-if="resetSolutionBtnShowFlag">重置</el-button>
                                </div>
                            </el-tab-pane>
                            <!-- 显示列 -->
                            <el-tab-pane label="显示列" name="second">
                                <div id="queryCon1" :style="{height: (height-100) + 'px' }" style="background-color:#FAFAFA; padding-top: 10px; overflow: scroll;" @drop="allowDrop1($event)"
                                     @dragover='allowDropover($event)'>
                                    <div class="ys-stGroup" v-for="(item,index) in conlist ">
                                        <el-form label-width="80px" ref="item.indexs" :model="dataTemp[item.indexs]">
                                            <el-row class="formrow">
                                                <el-col :span="10">
                                                    <el-form-item label="属性" class="mustWrite">
                                                        <el-input :placeholder="item.name" v-model="dataTemp[item.indexs].proPer" readonly></el-input>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="11">
                                                    <el-form-item label="排序方式" class="mustWrite">
                                                        <el-select placeholder="请选择" v-model="dataTemp[item.indexs].orderType">
                                                            <el-option v-for="items in item.orderOption" :key="items.key" :label="items.value" :value="items.key">
                                                            </el-option>
                                                        </el-select>
                                                    </el-form-item>
                                                </el-col>
                                                <el-col :span="3" class="objDelBtn">
                                                    <el-button class="delbtn" @click="delResultColFn(index,conlist)">删除</el-button>
                                                </el-col>
                                            </el-row>
                                        </el-form>
                                    </div>
                                </div>
								<div class="yu-toolBar" style="margin:10px 10px 10px 10px; text-align: center;">
								    <span>筛选条数：</span>
								    <el-input v-model="limitNum" type="num" style="width: 60px;"></el-input>
								    <el-button  class="quybtn"  @click="querySolutionRstFn" v-if="querySolutionRstBtnShowFlag">查询结果</el-button>
								    <el-button  @click="saveSolutionFn" v-if="saveSolutionBtnShowFlag">保存</el-button>
								    <el-button  class="resbtn" @click="resetSolutionFn" v-if="resetSolutionBtnShowFlag">重置</el-button>
								</div>
                            </el-tab-pane>
                            <el-tab-pane label="查询结果" name="third" >
                                <div class="resultDiv">
                                    <yu-toolBar>
                                        <el-button class="createCustGroupFn" @click="addCustGroupFn" >添加至客群</el-button>
                                    </yu-toolBar>
									<el-dialog :center="true" title="营销客群信息" :visible.sync="custGroupVisible" :close-on-click-modal="false">
										<el-form-x ref="datafilterForm" :group-fields="custGroupFields" :buttons="addCustGroupButtons" :disabled="formDisabled" label-width="120px" :data="data"></el-form-x>
									</el-dialog>
                                    <!-- <el-dialog :center="true" title="提示" :visible.sync="custGroupVisible" size="tiny">
                                        <span>是否确认导出</span>
                                        <span slot="footer" class="dialog-footer">
                                            <el-button :disabled="loading" v-loading="loading" @click="exportInfoFn()" type="primary">确定
                                            </el-button>
                                        </span>
                                    </el-dialog> -->
                                   <yu-xtable ref="qryresult" border selection-type="checkbox" row-number tooltip-effect="dark" :data="data" style="margin-bottom: 20px;" :pageable=false
                                              @selection-change="selectionChange" @row-dblclick="addCustGroupFn" @row-click="rowClick" class="qryresultC">
                                        <yu-xtable-column v-for="(item, index) in colunmNamelist" :key="index" :label="item.name" :prop="item.ename" min-width="180" sortable :show-overflow-tooltip="true" :formatter="dataFormatter">
                                        </yu-xtable-column>
                                    </yu-xtable>
                                    <yu-pagination :total="pageData.total" :current-page.sync="pageData.page" :page-size="pageData.size" @size-change="qryResultSizeChangeFn"
                                                   @current-change="qryResultPageChangeFn" small :layout="pageData.layout">
                                    </yu-pagination>
                                </div>
                            </el-tab-pane>
		
                        </el-tabs>
                    </template>
                </el-col>
                <el-col :span="colv.spanR">
                    <div id="queryCon2" v-show="solshow" :style="{height: (height-50) + 'px' }" style="background-color:#FAFAFA;overflow:auto">
                        <el-table-x ref="planTable" @row-dblclick="rowClickFn" :pageable=false
                                    :radiobox='true' :data-url="ssolutionUrl" :table-columns="ssolutiontableColumns" >
                        </el-table-x>
                    </div>
                    <div class="yu-toolBar" style="margin:10px 10px 10px 10px; text-align: center;" >
                        <el-button v-if="showdelbtn" class="delbtn" @click="datasetDeleteFn">删除</el-button>
                    </div>
                </el-col>
            </el-row>

        <!--保存方案-->
        <el-dialog-x ref="solutionNameSetDialog" title="设置方案名称" :visible.sync="solutionNameSetDialogVisible" width="500px" height="90px" class="dialogOne cc">
            <el-form label-width="100px" ref="solutionNameSetForm" :model="solutionNameSetFormData" style="padding-top: 30px;">
                <el-row :gutter="20">
                    <el-col :span="23">
                        <el-form-item label="方案名称" class="mustWrite">
                            <el-input placeholder='请填写方案名称' v-model="solutionNameSetFormData.ssName"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="doSaveSolutionFn">确定</el-button>
                <el-button @click="closeSolutionNameSetDialogFn">取消</el-button>
            </div>
        </el-dialog-x>
        <!-- 进行条 -->
        <el-dialog-x :title="progressDialogTitle" :visible.sync="progressDialogVisible" width="300px" height="170px">
            <div style="width: 100%; text-align: center;">
                <yu-progress type="circle" :percentage="progressPercent" custom-text="进行中"></yu-progress>
            </div>
        </el-dialog-x>
        <el-dialog-x :visible.sync="progressVisible" :show-close="true" title="导出进度" width="400px" height="80px">
            <el-progress :status="progressStatus" :percentage="percentage" :stroke-width="10" style="margin: 10px"></el-progress>
        </el-dialog-x>
    </div>
</div>